<template>
  <div class="body_bgi relative">
    <div class="full absolute top_0 left_0 z_-1 body_bgi">
      <threejsMap />
    </div>
    
    <!-- 背景图 -->
    <!-- <div 
      class="absolute top_0 left_0 z_9 body_bgi" 
      :style="{  width: window_width + 'px', height: window_height + 'px' }"
    ></div> -->

    <div class="w_full h_60 lh_50 absolute top_0 left_0">
      <Header 
        :headerName="headerName" 
        :headerStyle="headerStyle"
      />
    </div>

    <div 
      class="w_25_p absolute top_60 left_20 main_border flex_column_between gap_10"
      :style="{ height: window_height - 70 + 'px' }"
    >
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart1
          title="图表1"
          path=""
          chartType="柱状图3"
          :chartData="chartData1"
          filterText=""
          filterId=""
          filterList=[]
          :isShowUnit=true
          :isShowFilterIcon=false
          :isShowFullIcon=false
        />
      </div>
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart2 
          title="图表2"
          path=""
          chartType="柱状图"
          :chartData="chartData2"
          filterText=""
          filterId=""
          filterList=[]
          :isShowUnit=true
          :isShowFilterIcon=false
          :isShowFullIcon=false
        />
      </div>
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart3
          title="图表3"
          path=""
          chartType="饼图"
          :chartData="chartData3"
          filterText=""
          filterId=""
          filterList=[]
          :isShowUnit=true
          :isShowFilterIcon=false
          :isShowFullIcon=false
        />
      </div>
    </div>

    <div 
      class="w_25_p absolute top_60 right_20 main_border flex_column_between gap_10"
      :style="{ height: window_height - 70 + 'px' }"
    >
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart4 
          title="图表4"
          chartType="3d-pie"
        />
      </div>
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart5
          title="图表5"
          path=""
          chartType="环状图"
          :chartData="chartData5"
          filterText=""
          filterId=""
          filterList=[]
          :isShowUnit=true
          :isShowFilterIcon=false
          :isShowFullIcon=false
        />
      </div>
      <div class="w_full h_33_p p_5 body_bgi1">
        <DataChart6
          title="图表6"
          chartType="3d-bar"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import Header from '@/common/Header.vue'
  import threejsMap from '@/common/3d-map/index.vue'
  import DataChart1 from '@/components/data-chart/index.vue'
  import DataChart2 from '@/components/data-chart/index.vue'
  import DataChart3 from '@/components/data-chart/index.vue'
  import DataChart4 from '@/components/data-chart/index.vue'
  import DataChart5 from '@/components/data-chart/index.vue'
  import DataChart6 from '@/components/data-chart/index.vue'
  import { ref, reactive, computed, onMounted, watch, provide } from 'vue'


  const headerName = ref('西乌珠穆沁旗大数据平台')
  const headerStyle = reactive({
    color: '#00A295',
    fontWeight: 500,
    fontSize: '20px'
  })

  const chartData1 = reactive({ unit: '', data: [] })
  const chartData2 = reactive({ unit: '', x: [], y: [] })
  const chartData3 = reactive({ unit: '', data: [] })
  const chartData4 = reactive({ unit: '', data: [] })
  const chartData5 = reactive({ unit: '', data: [] })
  const chartData6 = reactive({ unit: '', data: [] })

  const window_width = window.innerWidth
  const window_height = window.innerHeight

  onMounted(() => {
    initChartData()
  })

  const initChartData = () => {
    chartData1.unit = '只'
    chartData1.x = ['牛','羊','马','驴']
    chartData1.y = [102,167, 123, 14]

    chartData2.unit = '只'
    chartData2.x = ['牛','羊','马','驴']
    chartData2.y = [102,167, 123, 14]
    

    chartData3.unit = '只'
    chartData3.data = [
      { name: '牛', value: 122, unit: ' ' },
      { name: '羊', value: 134, unit: ' ' },
      { name: '马', value: 345, unit: ' ' },
      { name: '驴', value: 67, unit: ' ' },
    ]

    chartData4.unit = '只'
    chartData4.data = [
      { name: '牛', value: 122, unit: ' ' },
      { name: '羊', value: 134, unit: ' ' },
      { name: '马', value: 345, unit: ' ' },
      { name: '驴', value: 67, unit: ' ' },
    ]

    chartData5.unit = '只'
    chartData5.data = [
      { name: '牛', value: 122, unit: ' ' },
      { name: '羊', value: 134, unit: ' ' },
      { name: '马', value: 345, unit: ' ' },
      { name: '驴', value: 67, unit: ' ' },
    ]

    chartData6.unit = '只'
    chartData6.data = [
      { name: '牛', value: 22, unit: ' ' },
      { name: '羊', value: 34, unit: ' ' },
      { name: '马', value: 45, unit: ' ' },
      { name: '驴', value: 67, unit: ' ' },
    ]
  }
</script>

<style>
  /* .body_bgi { background-image: url('@/assets/images/img/bgi.png'); background-size: 100% 100%; }  */
</style>

